<template>
  <div class="mine">
    <SwipePagination v-model="page" :can-swipe="canSwipe" :can-swipe-left="false">
      <MinePage1 @to-page="toPage"></MinePage1>
      <template #page-2>
        <MinePage2 :name="page2Name" @to-page="toPage"></MinePage2>
      </template>
      <template #page-3>
        <MinePage3 :name="page3Name" :params="params" @to-page="toPage"></MinePage3>
      </template>
    </SwipePagination>
  </div>
</template>

<script setup>
import { computed, defineAsyncComponent, onActivated, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { storeToRefs } from 'pinia'
import { useAccountStore } from '@/store/account'
import { useHeadStore } from '@/store/head'
import asyncCompWithLoading from '@/utils/async-comp-with-loading'
import { useNavRefresh } from '@/compositions/nav/refresh'
import { NAVS } from '@/constant'

const SwipePagination = asyncCompWithLoading(() => import('@/components/swipe/SwipePagination.vue'))
const MinePage1 = defineAsyncComponent(() => import('./MinePage1.vue'))
const MinePage2 = defineAsyncComponent(() => import('./MinePage2.vue'))
const MinePage3 = defineAsyncComponent(() => import('./MinePage3.vue'))

const page = ref(1)
const page2Name = ref('')
const page3Name = ref('')
const params = ref([])

const canSwipe = computed(() => page.value !== 1)

let timeoutId
function toPage(pageValue, name, parameters) {
  clearTimeout(timeoutId)
  page.value = pageValue

  if (pageValue === 1) {
    // 等待轉場效果結束
    timeoutId = setTimeout(() => {
      page2Name.value = ''
      page3Name.value = ''
    }, 300)
  }

  if (pageValue === 2) {
    page2Name.value = name
  }

  if (pageValue === 3) {
    page3Name.value = name
    fixPage2Name(page2Name)
  }

  if (parameters) {
    params.value = parameters
  }
}

const { toMineHead } = useHeadStore()

function fixPage2Name(page2Name) {
  if (page2Name.value !== '') return

  if (['terms-of-service', 'privacy-policy', 'cookie-policy', 'dmca', 'usc-statement'].includes) {
    page2Name.value = 'legal'
  }
}

// 進來先判斷參數是否直接導致某頁
onActivated(() => {
  const { page, name } = route.query
  if (page && name) {
    toPage(parseInt(page), name)
  }
  toMineHead({ path: route.path })
})

// query 和 params 的走法
const route = useRoute()
const router = useRouter()
const pages3Map = {
  legal: ['terms-of-service', 'privacy-policy', 'cookie-policy', 'dmca', 'usc-statement'],
  settings: ['mail-verify', 'notify-letter'],
}

watch(
  [() => route.query, () => route.params],
  ([query, params]) => {
    if (!route.name.includes('mine')) return

    if (query.page && query.name) {
      toPage(parseInt(query.page), query.name)
      return
    }

    if (!params.to || !query) {
      return
    }
    for (const [page2Name, pages] of Object.entries(pages3Map)) {
      const page3Name = pages.find((key) => params.to.includes(key))
      if (page3Name) {
        toPage(3, page3Name)
        router.replace({ name: 'mine', params: { to: `${page2Name}/${page3Name}` } })
        return
      }
    }
    toPage(2, params.to)
  },
  { immediate: true },
)

const accountStore = useAccountStore()
const { isLogin } = storeToRefs(accountStore)
watch(isLogin, (login) => {
  if (!login) {
    toPage(1)
  }
})

// nav 點擊原本頁面要導到home
useNavRefresh(NAVS.MINE, () => toPage(1))
</script>

<style lang="scss" scoped>
.mine {
  width: 100%;
  height: 100%;
}
</style>
